<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <a-col :span="24">
        <a-card title="详情">
          <!-- <template #extra>
            <a-button type="primary" class="ml-5" @click="edit()">编辑</a-button>
          </template> -->
          <a-row>
            <a-col :span="4">
              <a-avatar :size="64" :src="formState.data.headUrl"></a-avatar>
            </a-col>
            <a-col :span="20">
              <a-row>
                <a-col :span="8">
                  <a-form-item>中文姓名：{{formState.data.stuName}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>渠道来源：{{formState.data.chnSource}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>意向程度：{{formState.data.interDegree}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>销售负责人：{{formState.data.saleHead}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>项目负责人：{{formState.data.asdHead}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>市场负责人：{{formState.data.actHead}}</a-form-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <div class="pre-title">基础信息</div>
        <a-card>
          <a-row>
            <a-col :span="6">
              <a-form-item>First Name:{{formState.data.surname}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>Last Name:{{formState.data.givenName}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>出生日期:{{formState.data.dateBirth}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>性别:{{formState.data.sex}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>证件类型:{{formState.data.papersType}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>证件号:{{formState.data.paperNum}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>出生地:{{formState.data.birthAdd}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>国籍:{{formState.data.nationality}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>联系地址:{{formState.data.relaAdd}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>邮编:{{formState.data.postalCode}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>签证类型:{{formState.data.visaType}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>国内电话:{{formState.data.localPhone}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>海外电话:{{formState.data.osPhone}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>Email:{{formState.data.email}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>备用Email:{{formState.data.backEmail}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>最高学历:{{formState.data.eduType}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>创建人:{{formState.data.createBy}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>创建时间:{{formState.data.createTime}}</a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <div class="pre-title">国籍所在地永久居住地址</div>
        <a-card>
          <a-row>
            <a-col :span="6">
              <a-form-item>开始居住时间:{{formState.data.liveBtime}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>国家:{{formState.data.country}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>地址:{{formState.data.province+formState.data.city+formState.data.addDetail}}
              </a-form-item>
            </a-col>
            <a-col :span="6">
							<a-form-item>邮编:***</a-form-item>
						</a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <div class="pre-title">紧急联系人</div>
        <a-card>
          <a-row>
            <a-col :span="6">
              <a-form-item>姓名:{{formState.data.urgName}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>关系:{{formState.data.urgRelative}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>使用语言:{{formState.data.urgLag}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>电话:{{formState.data.urgPhone}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>Email:{{formState.data.urgEmail}}</a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <div class="pre-title">毕业高中</div>
        <a-card>
          <a-row>
            <a-col :span="6">
              <a-form-item>国家:{{formState.data.hschCty}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>城市:{{formState.data.hschCity}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>学校名:{{formState.data.hschlName}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>入学时间:{{formState.data.hschBtime}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>毕业时间:{{formState.data.hschEtime}}</a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <div class="pre-title">就读大学</div>
        <a-card>
          <a-row>
            <a-col :span="6">
              <a-form-item>国家:{{formState.data.colCty}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>城市:{{formState.data.colAdd}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>学校名:{{formState.data.colName}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>入学时间:{{formState.data.colBtime}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>毕业时间:{{formState.data.colEtime}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>毕业学分:{{formState.data.colEduCredit}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>已修学分:{{formState.data.colCredit}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>就读专业:{{formState.data.colReadPro}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>辅修专业:{{formState.data.colMinorPro}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>目前GPA:{{formState.data.colPga}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>大学毕业学位:{{formState.data.colDegree}}</a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <div class="pre-title">英语等级</div>
        <a-card>
          <a-row>
            <a-col :span="6">
              <a-form-item>英语等级:{{formState.data.engLevel}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>考试分数:{{formState.data.engScore}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>考试时间:{{formState.data.engTime}}</a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <div class="pre-title">纸质成绩单寄送地址</div>
        <a-card>
          <a-row v-for="(item,index) in formState.data.stuTranscriptAdds" :key="index">
            <a-col :span="6">
              <a-form-item>收件人:{{item.recName}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>电话:{{item.recPhone}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>地址:{{item.recAdd}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>邮编:{{item.postalCode}}</a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <div class="pre-title">意向信息</div>
        <a-card>
          <a-row v-for="(item,index) in formState.data.stuPurposes" :key="index">
            <a-col :span="6">
              <a-form-item>意向学校:{{item.school}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>意向项目:{{item.project}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>意向课程:{{item.course}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>课程认证状态:{{item.authStatus}}</a-form-item>
            </a-col>
            <a-col :span="6" v-if="item.failCause!=''">
              <a-form-item>失败原因:{{item.failCause}}</a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>认证截图:
              <a-image :width="200" :src="item.authUrl" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <div class="pre-title">跟进频率</div>
        <a-card>
          <a-row>
            <a-col :span="6">
              <a-form-item>跟进周期:{{formState.data.followRate}}</a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <div class="pre-title">备注</div>
        <a-card>
          <a-row>
            <a-col :span="6">
              <a-form-item>{{formState.data.remark}}</a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>
<script>
  import {
    defineComponent,
    reactive,
    toRaw,
    createVNode,
    onMounted,
    ref,
    onActivated
  } from "vue";
  import {
    useRoute,
    useRouter
  } from 'vue-router';
  import {
    selectById
  } from "@/api/module/student/student-bop-manage";
  import {
    message
  } from 'ant-design-vue';
  import moment from 'moment'
  import {
    getDictByCodesReturnObj
  } from '@/tools/get-dict'
  import {
    isEmpty
  } from '@/tools/common'
  import dictEnum from "@/const/dict"
  export default {
    name: "student-manage-detail",
    setup() {
      const router = useRouter();
      const route = useRoute();
      const formState = reactive({
        data: {}
      })
      const baseFields = reactive({
        dict: {}
      })
      const getDataByDict = (data, dictKey) => {
        if (isEmpty(data)) return '-'
        const item = baseFields.dict[dictKey].find(v => v.value == data)
        if (isEmpty(item)) return '-'
        return item.label
      }
      onActivated(async () => {
        baseFields.dict = await getDictByCodesReturnObj([
          dictEnum.DEGREE_INTENTION,
          dictEnum.SEX,
          dictEnum.DOCUMENT_TYPE,
          dictEnum.VISA_TYPE,
          dictEnum.HIGHEST_EDUCATION,
          dictEnum.COURSE_STATUS,
        ])
        let res = await selectById({
          id: route.query.id
        })
        res.data.dateBirth = moment(res.data.dateBirth).format('YYYY-MM-DD')
        res.data.liveBtime = moment(res.data.liveBtime).format('YYYY-MM-DD')
        res.data.hschBtime = moment(res.data.hschBtime).format('YYYY-MM-DD')
        res.data.hschEtime = moment(res.data.hschEtime).format('YYYY-MM-DD')
        res.data.colBtime = moment(res.data.colBtime).format('YYYY-MM-DD')
        res.data.colEtime = moment(res.data.colEtime).format('YYYY-MM-DD')
        res.data.engTime = moment(res.data.engTime).format('YYYY-MM-DD')
        res.data.interDegree = getDataByDict(res.data.interDegree, dictEnum.DEGREE_INTENTION)
        res.data.sex = getDataByDict(res.data.sex, dictEnum.SEX)
        res.data.papersType = getDataByDict(res.data.papersType, dictEnum.DOCUMENT_TYPE)
        res.data.visaType = getDataByDict(res.data.visaType, dictEnum.VISA_TYPE)
        res.data.eduType = getDataByDict(res.data.eduType, dictEnum.HIGHEST_EDUCATION)
        for (var i in res.data.purpose) {
          res.data.purpose[i].authStatus = getDataByDict(res.data.purpose[i].authStatus, dictEnum.COURSE_STATUS)
        }
        formState.data = res.data;
        console.log(formState.data)
        // baseFields.professorEmploymentBackgroud = res.data.professorEmploymentBackgroud;
      })
      const edit = () => {
        router.push({
          path: '/studentrtv/student-bop-manage/add',
          query: {
            id: route.query.id
          }
        })
      }
      return {
        edit,
        formState,
      }
    }
  }
</script>
<style scoped>
  .ant-form-item {
    margin-bottom: 0x;
    margin: 10px 0;
  }

  .pre-title {
    padding: 10px 25px;
    background-color: #f5f5f5;
    color: #555;
  }
</style>
